﻿@{
    ViewBag.Title = "Pencas Olimarudo - Login";
}

@*<div style="margin-left:35%; margin-bottom:50px; color:#B6201C; font-size:1.2em">
    <div style="margin-bottom:10px"><b>La penca ha finalizado. Felicitaciones a los ganadores:</b></div>
    <div style="font-size:1.4em"><b>1º: gertaglia, 505 puntos</b></div>
    <div style="font-size:1.4em"><b>2º: germanpastorini1, 497 puntos</b></div>
    <div style="margin-bottom:20px; font-size:1.4em"><b>3º: jannineborbonet, 491 puntos</b></div>
    <div style="margin-left:10%"><a class="loginRedirectBtn" href="Posiciones">Ver posiciones finales    </a></div>
</div>*@

<div class="small-12 medium-10 columns">
    @using (Html.BeginForm("Login", "Home", FormMethod.Post, new { id = "loginForm" }))
    {
        <div id="mailContainer">
            <div class="row" style="margin-bottom:10px">
                <div class="small-3 medium-2 medium-offset-2 columns text-right">E-mail:</div>
                <div class="small-7 medium-5 large-4 columns end"><input type="text" id="email" name="email" onkeydown = "return (event.keyCode!=13);"/></div>
            </div>

            <div class="row">
                <div class="small-3 medium-2 medium-offset-2 columns text-right">Código:</div>
                <div class="small-4 medium-2 large-2 columns end"><input type="text" id="token" onkeydown = "return (event.keyCode!=13);"/></div>
                <div class="small-4 medium-2 large-2 columns"><input type="password" id="hiddenToken" onkeydown = "return (event.keyCode!=13);"/></div>
                <div class="small-4 medium-4 large-2 columns end"><label><input id="checkMostrarClave" type="checkbox"/>Mostrar</label></div>
            </div>
            <input id="tokenToSubmit" name="token" type="hidden" value="" />

            <div class="row" style="margin-top: 15px">
                <div class="small-7 medium-4 medium-offset-1 columns text-right" style="padding-top: 4px"><a id="recuperarClave" href="">Recuperar código</a></div>
                <div class="small-1 medium-1 columns text-left" style="padding-top: 4px">&nbsp;<img id="loginLoader" style="display:none" height="20px" width="20px" src="@Url.Content("Content/img/ajax-loader.gif")" /></div>                
                <div class="small-4 medium-2 columns end"><button id="loginButton" type="button" class="btn btn-danger">Ingresar</button></div>
            </div>

            <div class="row">
                <div id="loginError" class="medium-6 medium-offset-3 columns end text-left" style="margin-top:15px; color:red; text-align:center">@(ViewBag.ErrorMessage ?? "")</div>
            </div>
        </div>
    }
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#menu-bar li").removeClass("active");

        $("#session-bar").html("&nbsp;");

        $("#recuperarClave").click(function (ev) {
            ev.preventDefault();
            var email = $("#email").val();

            if ($(this).attr("disabled") == undefined || $(this).attr("disabled") == false) {
                if (isValidEmailAddress(email)) {
                    $("#email").css("background-color", "white");
                    $.ajax({
                        type: 'POST',
                        url: "@Url.Action("RecuperarClave", "Home")",
                        data: {
                            email: email
                        },
                        beforeSend: function () {
                            $("#recuperarClave").attr("disabled", "disabled");
                            $("#loginLoader").show();
                        },
                        success: function (result) {
                            switch (result) {
                                case "-1":
                                    $("#loginError").css("color", "red");
                                    $("#loginError").text("Ocurrió un error inesperado. Inténtelo más tarde o contáctenos");
                                    break;
                                case "0":
                                    $("#loginError").css("color", "red");
                                    $("#loginError").text("No existe ninguna clave asociada a su casilla de correo");
                                    break;
                                case "1":
                                    $("#loginError").css("color", "green");
                                    $("#loginError").text("Sus códigos llegarán en unos minutos a su correo");
                                    break;
                            }
                        },
                        error: function(){
                            $("#loginError").css("color", "red");
                            $("#loginError").text("caca");
                        },
                        complete: function () {
                            $("#recuperarClave").removeAttr("disabled");
                            $("#loginLoader").hide();
                        }
                    });
                }
                else {
                    $("#loginError").css("color", "red");
                    $("#loginError").text("Ingrese un e-mail con formato válido");
                    $("#email").css("background-color", "pink")
                }
            }
        });


        $("#loginButton").click(function () {
            if (!$(this).attr("disabled")) {
                $("#tokenToSubmit").val($("#token").is(":visible") ? $("#token").val() : $("#hiddenToken").val())

                if (isValidEmailAddress($("#email").val())) {
                    $(this).attr("disabled", "disabled");
                    $("#email").css("background-color", "white");
                    $("#loginForm").submit();
                }
                else {
                    $("#loginError").css("color", "red");
                    $("#loginError").text("Ingrese un e-mail con formato válido");
                    $("#email").css("background-color", "pink");
                }
            }
        });

        var emailIngresado = '@Session["emailIngresado"]';
        $("#email").val(emailIngresado);

        $("#email, #hiddenToken, #token").keyup(function (e) {
            if (e.keyCode == 13) {
                $("#loginButton").click();
            }
        });
    });
</script>